<template>
    <!--    <el-button style="background: #3d3d3d;color: white;margin-bottom: 10px" @click="addQqDialog=true">添加qq</el-button>-->
    <el-table
            :data="qqList"
            border
            style="width: 50%">
        <el-table-column
                type="index"
                label="序号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="number"
                label="qq"
                width="180">
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="mini" type="info" @click="showTodoDialog(scope.row)">查看详情</el-button>
                <!--            <el-button size="mini" type="danger">删除</el-button>-->
            </template>
        </el-table-column>
    </el-table>
    <el-pagination class="block"
                   layout="prev, pager, next"
                   @current-change="current_change"
                   :page-count="total"
                   style="margin-top: 10px"
    >
    </el-pagination>
    <el-dialog
            v-model="todoDialog"
            title="Todo详情"
            width="50%">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="未完成todo" name="未完成">
                <el-table
                        :data="todoList"
                        border
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="300%">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="待办内容"
                            width="300%">
                    </el-table-column>
                </el-table>
                <el-pagination class="block"
                               layout="prev, pager, next"
                               @current-change="todo_current_change"
                               :page-count="todo_total"
                               style="margin-top: 10px">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="已完成todo" name="已完成">
                <el-table
                        :data="finishedTodoList"
                        border
                        style="width: 50%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="待办内容"
                            width="180">
                    </el-table-column>
                </el-table>
                <el-pagination class="block"
                               layout="prev, pager, next"
                               @current-change="finish_todo_current_change"
                               :page-count="finish_todo_total"
                               style="margin-top: 10px">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>

</template>

<script>

    export default {
        name: "Todo",
        data() {
            return {
                qqList: [],
                todoDialog: false,
                addQqDialog: false,
                todoList: [],
                finishedTodoList: [],
                activeName: '未完成',
                total: 0,//默认数据总数
                pageSize: 7,//每页的数据条数
                currentPage: 1,//默认开始页面
                todo_total: 0,//默认数据总数
                todo_pageSize: 5,//每页的数据条数
                todo_currentPage: 1,//默认开始页面
                finish_todo_total: 0,//默认数据总数
                finish_todo_pageSize: 5,//每页的数据条数
                finish_todo_currentPage: 1,//默认开始页面
                currentId: 0
            }
        },
        methods: {
            finish_todo_current_change(currentPage) {
                this.finish_todo_currentPage = currentPage
                this.getFinishedTodoList(this.currentId)
            },
            todo_current_change(currentPage) {
                this.todo_currentPage = currentPage
                this.getTodoList(this.currentId)
            },
            current_change: function (currentPage) {
                this.currentPage = currentPage
                this.getQqList()
            },
            getFinishedTodoList(id) {
                this.getRequest('/todo/getFinishedTodo?id=' + id
                    + '&index=' + this.finish_todo_currentPage
                    + '&limit=' + this.finish_todo_pageSize).then(resp => {
                    if (resp) {
                        this.finishedTodoList = resp.data.list
                        this.finish_todo_currentPage = resp.data.curIndex
                        this.finish_todo_total = resp.data.totalPage
                    }
                })
            },
            getTodoList(id) {
                this.getRequest('/todo/getTodo?id=' + id
                    + '&index=' + this.todo_currentPage
                    + '&limit=' + this.todo_pageSize).then(resp => {
                    if (resp) {
                        this.todoList = resp.data.list
                        this.todo_currentPage = resp.data.curIndex
                        this.todo_total = resp.data.totalPage
                    }
                })
            },
            showTodoDialog(row) {
                this.currentId = row.id
                this.getFinishedTodoList(this.currentId)
                this.getTodoList(this.currentId)
                this.todoDialog = true
            },
            getQqList() {
                this.getRequest('/todo/getQqList?index=' + this.currentPage + '&limit=' + this.pageSize).then(resp => {
                    if (resp) {
                        this.qqList = resp.data.list
                        this.currentPage = resp.data.curIndex
                        this.total = resp.data.totalPage
                    }
                })
            }
        },
        mounted() {
            this.getQqList()
        }

    }
</script>

<style scoped>

</style>
